<template>
	<div id="address">
		<toptitle :conter="'收货地址'"></toptitle>

		<div class="content">
			<h3>基本信息</h3>
			<ul>
				<li>
					<span>姓名</span>
					<input type="text" placeholder="收货人姓名" v-model="arr.name">
				</li>
				<li>
					<span>电话</span>
					<input type="text" placeholder="收货人手机号" v-model="arr.phone">
				</li>
				<li>
					<van-field v-model="fieldValue" is-link readonly label="地区" placeholder="请选择所在地区"
						@click="show = true" />
					<van-popup v-model="show" round position="bottom">
						<van-cascader v-model="cascaderValue" title="请选择所在地区" :options="options" @close="show = false"
							@finish="onFinish" :field-names="{text:'name',value:'adcode',children:'districts'}" />
					</van-popup>
				</li>
				<li>
					<span>详细地址</span>
					<input type="text" placeholder="街道门牌、楼层房间号等信息" v-model="arr.a_desc">
				</li>
			</ul>
			<ul>
				<li>
					<span>设为默认收货地址</span>
					<van-switch v-model="arr.is_select" />
				</li>
			</ul>
			<button class="preserve" @click="preserve">保存</button>
			<button class="delete" @click="delet_e">删除</button>
		</div>
	</div>
</template>

<script>
	// 修改用户信息
	import {
		addAddress
	} from "@/api/user"
	// 引入顶部栏组件
	import toptitle from "@/components/top_title.vue"
	import citys from "@/assets/js/citys"
	export default {
		components: {
			// 注册顶部栏组件
			toptitle,
		},
		data() {
			return {
				options: citys.districts[0].districts,
				show: false,
				fieldValue: '',
				cascaderValue: '',
				// checked: false,
				// 请求参数
				arr: {
					// 名字
					name: "",
					// 手机号
					phone: "",
					// 市
					a_city: "",
					// 区县
					a_code: "",
					// 详细
					a_desc: "",
					// 省
					a_provice: "",
					// 默认地址
					is_select: 0
				}
			};
		},
		watch: {
			fieldValue(o_ld, n_ew) {
				let a = o_ld.split('/');
				this.arr.a_provice = a[0];
				this.arr.a_city = a[1];
				this.arr.a_code = a[2];
			}
		},
		methods: {
			// 全部选项选择完毕后，会触发 finish 事件
			onFinish({
				selectedOptions
			}) {
				this.show = false;
				this.fieldValue = selectedOptions.map((option) => option.name).join('/');
			},
			// 删除
			delet_e() {

			},
			// 保存
			preserve() {
				if (this.arr.name == "") {
					this.$Message.error("姓名不可为空")
					return
				}
				if (this.fieldValue == "") {
					this.$Message.error("地区不可为空")
					return
				}
				if (this.arr.phone == "") {
					this.$Message.error("手机号不可为空")
					return
				}
				if (this.arr.a_desc == "") {
					this.$Message.error("详细地址不可为空")
					return
				}
				addAddress(this.arr).then(res => {
					this.$Message.success("添加成功")
					/* 延迟1秒跳转 */
					setTimeout(() => {
						// 跳转页面
						this.$router.push({
							path: '/users/address'
						})
					}, 1000)

				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	$width:(100vw / 375);

	#address {
		width: 100vw;
		height: 100vh;
		background-color: #f7f8fa;
		padding-top: 44 * $width;

		.content {
			width: 90%;
			margin: 20 * $width 5%;

			h3 {
				margin: 10 * $width 0;
				font-weight: 400;
			}

			// display: flex;
			ul {
				width: 100%;
				padding: 10 * $width;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 10 * $width;

				li {
					padding: 0 16 * $width;
					width: 100%;
					display: flex;
					height: 44 * $width;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1 * $width solid #eee;

					input {
						height: 90%;
						width: 220 * $width;
						border: none;
						outline: none;
					}

					// 修改input placeholder样式
					input::-webkit-input-placeholder {
						/* WebKit, Blink, Edge */
						color: #cccccc;
					}

					input:-moz-placeholder {
						/* Mozilla Firefox 4 to 18 */
						color: #cccccc;
					}

					input::-moz-placeholder {
						/* Mozilla Firefox 19+ */
						color: #cccccc;
					}

					input::-ms-input-placeholder {
						/* Internet Explorer 10-11 */
						color: #cccccc;
					}
				}

				li:nth-of-type(3) {
					padding: 0;
					margin-top: 3 * $width;


				}

				li:nth-of-type(4) {
					border: none;
				}
			}

			ul:nth-of-type(2) {
				margin-top: 15 * $width;

				li {
					border: none;
				}
			}

			.preserve,
			.delete {
				width: 90%;
				height: 44 * $width;
				margin: 40 * $width 5% 0 5%;
				background-color: #f00;
				border: none;
				border-radius: 22 * $width;
				color: #fff;
				font-size: 16 * $width;
			}

			.delete {
				margin-top: 20 * $width;
				background-color: #fff;
				box-shadow: rgba(0, 0, 0, 0.16) 0 1 * $width 4 * $width;
				color: #000;
				font-size: 16 * $width;
			}
		}
	}
</style>
